<!--列表页-->
<template>
  <div style="width: 1200px;margin: 0 auto;">
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in contentArr" style="margin-top:10px;">
        <el-card>
          <router-link :to="'/detail?id='+item.id" style="text-decoration:none;color:#333;">
            <img :src="'http://localhost:8080'+item.imgUrl" style="width:100%;height:150px;">
            <p style="height:40px;">{{ item.title }}</p>
          </router-link>
          <!--作者与分类-->
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="16" style="font-size:20px;line-height:40px;">{{ item.nickname }}</el-col>
            <el-col :span="4" style="line-height:40px;">{{ item.categoryName }}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";
const contentArr = ref([]);

const loadContents = ()=>{
  //判断是否包含wd
  if(location.search.includes('wd')){//关键词搜索
    let wd = new URLSearchParams(location.search).get('wd');
    axios.get('http://localhost:8080/v1/contents/'+wd+'/search')
        .then((response)=>{
      if(response.data.code==2001){
        contentArr.value=response.data.data;
        console.log(contentArr.value)
      }
    })
  }else{//根据类型type显示数据
    let type = new URLSearchParams(location.search).get('type');
    axios.get('http://localhost:8080/v1/contents/'+type+'/type')
        .then((response)=>{
          if(response.data.code==2001){
            contentArr.value=response.data.data;
          }
        })
  }
}
//A-->B
onMounted(()=>{
  loadContents();
})
//A-->A
onBeforeUpdate(()=>{
  loadContents();
})
</script>

<style scoped>

</style>